<!--
 * @Author: levi7754 levi7754@163.com
 * @Date: 2025-05-05 17:11:57
 * @LastEditors: levi7754 levi7754@163.com
 * @LastEditTime: 2025-10-13 09:17:10
 * @FilePath: /udp-mall/src/pages/index/login.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<view class="ut-login-content">
		<view class="head">
			<view class="ut-welcome-text">
				<view>Weclome Back!</view>
				<view>Glad to see you, Again!</view>
			</view>
		</view>
		<view class="form-box">
			<view class="row-input" :class="{'row-input-focus': focus === 'userName'}">
				<view class="row-img">
					<uni-icons custom-prefix="ucon" type="ucon-mine" size="30" :color="focus === 'userName' ? '#EA0D2C' : '#dadada'" />
				</view>
				<uni-easyinput
					v-model="data.username"
					:placeholder="$t('app.please')+$t('app.account')"
					:inputBorder="false"
					maxlength="32"
					primaryColor="#EA0D2C"
					:focus="!!data.username"
					@focus="onFocus('userName')"
				/>
				<text class="row-lable">{{ $t("app.account") }}</text>
			</view>
			<view class="row-input" :class="{'row-input-focus': focus === 'password'}">
				<view class="row-img">
					<uni-icons custom-prefix="ucon" type="ucon-password" size="30" :color="focus === 'password' ? '#EA0D2C' : '#dadada'" />
				</view>
				<uni-easyinput
					v-model="data.password"
					:inputBorder="false"
					:clearable="false"
					:placeholder="$t('app.please')+$t('app.password')"
					maxlength="18"
					primaryColor="#EA0D2C"
					type="password"
					@focus="onFocus('password')"
				/>
				<text class="row-lable">{{ $t("app.password") }}</text>
			</view>
			<view class="ut-check-box">
				<view class="check-box">
					<view>
						<checkbox-group @change="onCheckClick">
							<label>
								<checkbox
									:checked="remeber"
									activeBorderColor="#EA0D2C"
									color="#EA0D2C"
								>
								{{ $t('app.remember') }}
							</checkbox>
							</label>
						</checkbox-group>
					</view>
					<view class="ut-lang-wrapper" @tap="toggleLang">
						<image class="ut-lang-img" :src="`/static/flag/${lang?.code || 'en'}.png`" />
					</view>
				</view>
			</view>
			<view
				class="login-btn"
				:class="{'login-btn-enabled': data.password && data.username}"
				@tap="onLogin"
			>
				{{ $t("app.login") }}
			</view>
			<!-- <text class="menu-link">{{ $t("app.forgetPassword") }}</text> -->
			<view class="register-tip">
				{{ $t("app.noCount") }}
				<text @click="gotoRegister">{{ $t("app.registerNow") }}</text>
			</view>
		</view>
	</view>
</template>


<script>
  import { tenantId, navigateTo, errorTotast } from '@/utils';
	import { getLanuage, login } from '@/api'
	export default {
		data() {
			return {
        focus: "userName",
        remeber: false,
        activiteColor: "red",
        lang: uni.getStorageSync("kLang"),
        data: {
          tenantId,
          grant_type: 'user_token',
          username: "",
          password: ""
        }
			}
		},
    onLoad() {
      !this.lang && this.getLangList()
    },
    onShow() {
      this.lang = uni.getStorageSync("kLang")
			this.remeber = uni.getStorageSync("kRemember")
    },
		methods: {
      onFocus(focus) {
		    this.focus = focus
      },
      onLogin() {
        console.log(this.remeber)
        if (!this.data.username || !this.data.password) {
          return errorTotast(this.$t("tip.norpisEmpty"))
        }
        login(this.data).then(res => {
					console.log(res)
					console.log(this.$store)
					this.setLocalStorage(res)
					
					this.$store.dispatch("getDataAuth")
					this.$store.dispatch("getInfo")
					this.$store.dispatch("getDict")
				})
      },
			
			/* 保存token */
			setLocalStorage(token) {
				const { access_token, expires_in, refresh_token, accountId } = token;
				const cache = {
					accountId,
					accessToken: access_token,
					refreshToken: refresh_token,
					expires: Date.now() + expires_in * 1000
				};
				uni.setStorageSync('kAuthorizedToken', cache)
				
				uni.setStorage({
					key: 'kLoginParams',
					data: this.data
				})
			},
      onCheckClick() {
        this.remeber = !this.remeber
        uni.setStorageSync("kRemember", this.remeber)
      },
      toggleLang() {
				navigateTo("/pages/login/language")
      },

	    // 去注册
      gotoRegister() {
        navigateTo('/pages/login/register')
      },
      getLangList() {
				getLanuage({tenantId}).then(data => {
					console.log('land ==', data)
          this.lang = data.find(f => f.code === "en")
          uni.setStorageSync("kLang", this.lang)
        })
      },
		}
	}
</script>

<style lang="scss" scoped>
	.ut-login-content {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100vh;
		background-color: #fff;

		.head {
			display: flex;
			flex-direction: column;
			width: 100%;
			margin-top:150rpx;
			height: 20vh;
			// padding-bottom: 48rpx;
			.ut-welcome-text {
				padding-left: 36rpx;
				font-size: 52rpx;
				font-weight: bolder;
			}
		}


		.form-box {
			display: flex;
			align-items: center;
			flex-direction: column;
			position: fixed;
			top: 24vh;
			left: 0;
			right: 0;
			bottom: 0;

			.tip {
				padding-bottom: 20rpx;
				font-size: 60rpx;
				letter-spacing: 20rpx;
			}

			.row-input {
				margin: 25rpx 0;
				position: relative;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 600rpx;
				height: 100rpx;
				border: 4rpx solid #dadada;
				border-radius: 24rpx;

				.row-img {
					margin-right: 6rpx;
					padding-left: 10rpx;
					width: 100rpx;
					height: 60rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-right: 4rpx solid #dadada;

					image {
						width: 50rpx;
						height: 50rpx;
					}
				}
				.row-lable {
					position: absolute;
					width: 160rpx;
					display: block;
					left: 120rpx;
					top: -20rpx;
					font-size: 26rpx;
					text-align: center;
					color: #666;
					font-weight: 700;
					background-color: #FFFFFF;
				}

				// input {
				// 	color: #000;
				// }
				.uniui-eye-slash-filled {
					color: #EA0D2C;
				}
			}

			.row-input-focus {
				border-color: #EA0D2C;
				.row-img {
					border-right-color: #EA0D2C;
				}
				.row-lable {
					color: #EA0D2C;
				}
				input {
					color: #EA0D2C;
				}
			}
			.ut-check-box {
				width: 600rpx;
			}
			.check-box {
				display: flex;
				margin-top: 24rpx;
				// padding-left: 180rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				// color: #dfdaef;
				font-size: 26rpx;
			}
			.ut-lang-wrapper {
				padding: 0;
				margin: 0;
				.ut-lang-img {
					height: 36rpx;
					width: 60rpx;

				}
			}

			.login-btn {
				margin-top: 16rpx;
				width: 600rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100rpx;
				border-radius: 24rpx;
				font-size: 40rpx;
				letter-spacing: 2rpx;
				background: #cacaca;
				color: #FFF;
			}

			.login-btn-enabled {
				background: #EA0D2C;
			}

			.menu-link {
				line-height: 80rpx;
				letter-spacing: 3rpx;
				color: #EA0D2C;
				font-size: 26rpx;
			}

			.register-tip {
				position: fixed;
				color: #adadad;
				bottom: 30rpx;
				font-size: 28rpx;

				text {
					color: #EA0D2C;
				}
			}
		}
	}
</style>